<template>
	<view class="info-rev">
		<view class="info-abl">
			<view class="info-abl-heard">
				<image v-if="userinfo.avatar" :src="userinfo.avatar" mode=""></image>
				<image v-else src="../../static/icon/tou-1.png" mode=""></image>
			</view>
			<view class="info-abl-bnt" @click="goToQian">
				{{user_id ? '签 到' :'登 陆'}}
			</view>
		</view>
		<view class="info-conten">
			<view class="info-conten-fist">
				<view class="info-name">
					{{userinfo.author_name? userinfo.author_name : '游 客'}}
				</view>
				<view class="info-live">
					介绍自己获取更多了解哦
				</view>
			</view>
			<view class="info-conten-scode">
				<view class="scode-name" v-text="userinfo.fans_count || 0">
				</view>
				<view class="scode-live">
					关注
				</view>
				<view class="scode-name" v-text="userinfo.follow_count || 0">
				</view>
				<view class="scode-live">
					粉丝
				</view>
				<view class="scode-name" v-text="userinfo.integral_count || 0">
					9
				</view>
				<view class="scode-live">
					积分
				</view>
			</view>
			<view class="info-stre">
				<view class="info-stre-a" @click="goToHestro">
					<view class="info-stre-image">
						<image src="../../static/icon/4.png" mode=""></image>
					</view>
					<view class="info-stre-text">
						我的动态
					</view>
				</view>
				<view class="info-stre-a"   @click="goToFollow">
					<view class="info-stre-image">
						<image src="../../static/icon/2.png" mode=""></image>
					</view>
					<view class="info-stre-text">
						我的关注
					</view>
				</view>
				<view class="info-stre-a"   @click="goToWiter">
					<view class="info-stre-image">
						<image src="../../static/icon/3.png" mode=""></image>
					</view>
					<view class="info-stre-text">
						我要创作
					</view>
				</view>
				<view class="info-stre-a"  @click="goToMyArt">
					<view class="info-stre-image">
						<image src="../../static/icon/5.png" mode=""></image>
					</view>
					<view class="info-stre-text">
						我的文章
					</view>
				</view>
				<view class="info-stre-a" @click="goFeedback">
					<view class="info-stre-image">
						<image src="../../static/icon/1Q.png" mode=""></image>
					</view>
					<view class="info-stre-text">
						我要反馈
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
			};
		},
			computed: {
				...mapState(['user_id','userinfo'])
			},
			mounted() {
				this.get_userinfo()
			},
		methods: {
			goToHestro(){
				uni.navigateTo({
					url: "/pages/views/my-History/my-History",
				})
			},
			goToWiter(){
				uni.navigateTo({
					url: "/pages/views/Witer-page/Witer-page",
				})
			},
			goFeedback(){
				uni.navigateTo({
					url: "/pages/views/feedback/feedback",
				})
			},
			goToQian() {
				// 判断是否登陆
				if(!this.user_id) {
					this.get_userinfo()
				}else{
					uni.navigateTo({
						url: "/pages/views/sigin/sigin",
					})
					
				}
			},
			goToFollow(){
				if (!this.user_id) return uni.showToast({
					title:'请先登陆',
					icon:"none"
				})
				uni.navigateTo({
					url:"../../views/follow/follow"
				})
			},
			goToMyArt(){
					if (!this.user_id) return uni.showToast({
						title:'请先登陆',
						icon:"none"
					})
					uni.navigateTo({
						url:"../../views/my-article/my-article"
					})
			},
			async get_userinfo(){
				let id= '60c2d733f6a3980001d73348'
				uni.showLoading()
				const res = await this.$api.get_userinfo({
					user_id:  id,
				})
				uni.showToast({
					title:'登陆成功',
					icon:"none"
				})
				uni.hideLoading()
				this.$store.commit('SET_USERINFOR', res)
				this.$store.commit('SET_USER_ID', '60c2d733f6a3980001d73348')
				// console.log(this.userinfo);
			},
		}
	}
</script>

<style scoped lang="scss">
	.info-rev {
		position: relative;
		width: 100%;
		height: 150px;

		// background-color: #f0f0f0;
		.info-abl {
			box-sizing: border-box;
			position: absolute;
			top: -55px;
			left: 0px;
			padding: 0 15px;
			height: 55px;
			border-radius: 20px 20px 0 0;
			width: 100%;
			background-color: #f0f0f0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.info-abl-heard {
				height: 70px;
				width: 70px;
				border-radius: 50%;
				background-color: #fff;
				align-self: flex-end;
				overflow: hidden;
				border: 2px solid #fff;
				box-shadow: 1px 2px 10px 3px rgba($color: #000000, $alpha: 0.051);

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info-abl-bnt {
				width: 40px;
				border: 1px solid #ddd;
				padding: 3px 10px;
				font-size: 14px;
				border-radius: 15px;
				text-align: center;
				color: #333;
			}
		}

		.info-conten {
			height: 100%;
			width: 100%;
			box-sizing: border-box;
			padding: 0 15px;

			.info-conten-fist {
				padding-top: 10px;
				display: flex;
				align-items: center;

				.info-name {
					font-weight: bold;
					color: #333;
					margin-left: 20px;
				}

				.info-live {
					font-size: 11px;
					border-radius: 10px;
					margin-left: 15px;
					color: #666;
					padding: 0 5px;
					background-color: #fff;
				}
			}

			.info-conten-scode {
				padding-top: 5px;
				padding-left: 20px;
				display: flex;
				align-items: center;

				.scode-name {
					font-weight: bold;
					color: #333;
					font-size: 12px;

				}

				.scode-live {
					font-size: 11px;
					margin-left: 5px;
					margin-right: 10px;
					color: #666;
				}
			}
		}
		.info-stre{
			padding-top: 15px;
			display: flex;
			justify-content: space-between;
			.info-stre-a{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
				.info-stre-image{
					width: 40px;
					height: 40px;
					padding-left: 8px;
					image{
						height: 100%;
						width: 100%;
					}
				}
				.info-stre-text{
					font-size: 12px;
					color: #666;
				}
			}
		}
	}
</style>
